<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{Lang.lang('兌換')}}</view>
			<view class="link_box" data-url="/pages/exchange/list" @click="gotopage">
				<input disabled="ture" type="text" value="" :placeholder="Lang.lang('兌換記錄')" placeholder-style="color:#fff;"
					v-model="link" />
				<view class="copy iconfont icon-dingdan"></view>
			</view>
			<view class="message iconfont icon-tongzhi" data-url="/pages/index/tidings" @click="gotopage">
				<view class="round" v-if="is_message_read==1"></view>
			</view>
			<picker @change="choiceLang" :value="langIndex" :range="Lang.lang('langData')" :range-key="'name'">
				<view class="language" v-if="lang == 'en'">EN</view>
				<view class="language" v-else>CN</view>
			</picker>
		</view>
		<view class="clear_box"></view>

		<view class="page_content">

			<view class="rate_box">
				<view class="icon iconfont icon-huishuai"></view>
				<view class="text">{{Lang.lang('當前匯率')}}：1 {{exchange_info.from_coin}} ≈ {{exchange_info.exchange_price}}
					{{exchange_info.to_coin}}
				</view>

			</view>



			<view class="exchange_box">


				<view class="balance_box">
					<view class="list">
						<picker @change="bindPickerChange" :value="index" :range="exchange_list" range-key="title">
							<view class="type_box">
								<view class="type">{{exchange_info.title}}</view>
								<view class="arrow iconfont icon-xiangxia"></view>
							</view>
						</picker>
						<view class="expense">（{{Lang.lang('扣除')}}{{exchange_info.exchange_commission}}%{{Lang.lang('手續費')}}）</view>
					</view>
					<view class="list">
						<view class="balance">{{Lang.lang('餘額')}}：{{exchange_info.money}}
							<span>{{exchange_info.from_coin}}</span>

						</view>
					</view>
				</view>




				<view class="turn_box">
					<input class="num" v-model="num" @input="getAmount" />
					<!-- <view class="num">0.00</view> -->
					<view class="text">
						<span>{{exchange_info.from_coin}}</span>

					</view>
					<view class="arrow">
						<image src="../../static/arrow.png" mode="widthFix"></image>
					</view>
					<view class="num">{{to_num}}</view>
					<view class="text">
						<span>{{exchange_info.to_coin}}</span>

					</view>
				</view>
			</view>

		</view>

		<view class="confirm02" @tap="autoPupu">{{Lang.lang('立即兌換')}}</view>

		<view class="page_title">
			<view class="title">{{Lang.lang('價格曲線')}}</view>
		</view>

		<view class="chartsMain">
			<canvas canvas-id="canvasArea" id="canvasArea" class="charts" @touchstart="touchArea"></canvas>
		</view>


		<!-- 输入安全码 -->
		<view class="pupu_box" v-if="pupu" @tap="autoPupu">
			<view class="show_box" @tap.stop="">
				<view class="title">{{Lang.lang('請輸入交易密碼')}}</view>
				<view class="input">
					<input type="password" v-model="pay_password" :placeholder="Lang.lang('請輸入交易密碼')" />
				</view>
				<view class="menu_box">
					<view class="menu" @tap="autoPupu">{{Lang.lang('取消')}}</view>
					<view class="menu" @click="exchange">{{Lang.lang('確定')}}</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	// 图表
	import uCharts from "@/components/u-charts/u-charts.js";
	var _self;
	var canvaArea = null;
	export default {
		data() {
			return {
				index: 0,
				array: [],
				lang: 'en',
				langIndex: '',
				link: '',
				pupu: false,
				scrrol: false,
				info: '',
				exchange_list: [],
				exchange_info: {},
				is_message_read: 0,
				p_type: 1,
				num: 0,
				to_num: 0,
				list: [],
				//=======================
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				pay_password: '',

				// 折线图
				Area: {
					
				}
			}
		},
		mounted() {
			//加载折线图数据
			// this.loadLineData();
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(420);
			// this.getServerData();
		},
		onShow() {
			this.setMenuLang();
			this.lang = uni.getStorageSync('_language');
			this.loadData()
		},
		methods: {
			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.exchange_info = this.exchange_list[this.index]
				this.getAmount()
			},
			getServerData() {
				_self.showArea("canvasArea", this.chartData);
			},
			// 折线图
			showArea(canvasId, chartData) {
				canvaArea = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					legend: true,
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: _self.Area.categories,
					series: _self.Area.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						// min: 10,
						// max: 180,
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'straight',
							opacity: 0.2,
							addLine: true,
							width: 2
						}
					}
				});
			},
			touchArea(e) {
				canvaArea.showToolTip(e, {
					format: function(item, category) {
						return item.name + ' ' + category + ' ' + ':' + item.data
					}
				});
			},
			// ucharts end
			loadData() {
				let that = this;
				that.Net._get('api/wallet/exchangeIndex', {

				}, res => {
					if (res.code == 200) {
						that.exchange_list = [];
						that.is_message_read = res.data.is_message_read

						for (let i in res.data.exchange_list) {
							if (res.data.exchange_list[i].exchange_on == 1) {
								that.exchange_list.push(res.data.exchange_list[i])
							}
						}
						that.exchange_info = that.exchange_list[that.index]
						// ==================

						that.Area.categories = res.data.coin_price_curve_list.days;
						that.Area.series = [{
								name: 'YYDM',
								data: res.data.coin_price_curve_list.YYDM,
								color: '#0155FF'
							},
							{
								name: 'YYDZ',
								data: res.data.coin_price_curve_list.YYDZ,
								color: '#FA5657'
							},
						];
						that.getServerData();

					}
				});
			},
			getAmount() {
				let real_num = (this.num - this.num * this.exchange_list[this.index].exchange_commission / 100)
					.toFixed(6)
				this.to_num = (real_num * this.exchange_list[this.index].exchange_price).toFixed(6)
				
			},
			setMenuLang() {
				let that = this;
				uni.setTabBarItem(this.Lang.lang('indexMenu')[0]);
				uni.setTabBarItem(this.Lang.lang('indexMenu')[1]);
				uni.setTabBarItem(this.Lang.lang('indexMenu')[2]);
				uni.setTabBarItem(this.Lang.lang('indexMenu')[3]);
				uni.setTabBarItem(this.Lang.lang('indexMenu')[4]);
			},
			choiceLang: function(e) {
				let that = this;
				that.langIndex = e.target.value
				let lang = that.Lang.lang('langData')[that.langIndex].type;
				that.lang = lang;
				uni.setStorageSync('_language', lang);
				// that.setMenuLang();
				location.reload()
			},
			exchange() {
				let that = this;
				that.Net._get('api/wallet/exchange', {
					num: that.num,
					p_type: that.exchange_info.p_type,
					pay_password: that.pay_password
				}, res => {
					if (res.code == 200) {
						that.pay_password = '';
						that.pupu = false
						that.Msg.Success(res.msg)
						setTimeout(function() {
							that.loadData()
						}, 500)
					}
				});
			},
			autoPupu() {
				let that = this;
				that.pay_password = '';
				that.pupu = !that.pupu;
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	}
</script>

<style>
	.scrrolHeader {
		width: 100%;
		background-color: #1A1A1A !important;

	}

	.page_content {
		width: 92%;
		margin: 0 auto;
	}

	.rate_box {
		width: 100%;
		padding: 6vw 4vw;
		background-color: #1A1A1A;
		border-radius: 4vw;
		display: flex;
		align-items: center;
		margin-top: 4%;
	}

	.rate_box .icon {
		font-size: 4.5vw;
		color: #0155FF;
		margin-right: 2vw;
	}

	.rate_box .text {
		font-size: 3.8vw;
		color: #fff;
	}

	.exchange_box {
		width: 100%;
		background-color: #2A2A2A;
		border-radius: 4vw;
		margin-top: 4%;
	}

	.exchange_box .balance_box {
		width: 100%;
		padding: 6vw 4vw;
	}

	.exchange_box .balance_box .list {
		display: flex;
		align-items: center;
	}

	.exchange_box .balance_box .list:nth-child(2) {
		margin-top: 3vw;
	}

	.exchange_box .balance_box .list .type_box picker {
		flex: 1;
	}

	.exchange_box .balance_box .list .type_box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.exchange_box .balance_box .list .type_box .type {
		font-size: 5vw;
		font-weight: bold;
		color: #fff;
		margin-right: 2vw;
	}

	.exchange_box .balance_box .list .type_box .arrow {
		font-size: 4vw;
		font-weight: bold;
		color: #fff;
		margin-bottom: 2vw;
	}

	.exchange_box .balance_box .list .expense {
		flex: 1;
		text-align: right;
		font-size: 3.5vw;
		color: #FA5657;
	}

	.exchange_box .balance_box .list .balance {
		font-size: 3.5vw;
		color: #666666;
	}

	.exchange_box .turn_box {
		width: 100%;
		padding: 6vw 4vw;
		background-color: #1A1A1A;
		border-radius: 4vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.exchange_box .turn_box .arrow {
		width: 12vw;
		margin: 0 3vw;
	}

	.exchange_box .turn_box .arrow image {
		width: 100%;
	}

	.exchange_box .turn_box .num {
		font-size: 5.5vw;
		color: #666666;
		font-weight: bold;
		flex: 1;
	}

	.exchange_box .turn_box .text {
		font-size: 3.2vw;
		color: #fff;
	}

	.chartsMain {
		width: 92%;
		margin: 0 auto;
		height: 450rpx;
		padding-top: 15rpx;
		background: ;
		margin-bottom: 24rpx;
		background-color: #fff;
		border-radius: 4vw;
		margin-top: 4vw;
		box-sizing: border-box;
		padding: 4vw 3vw;

		.charts {
			width: 100%;
			height: 450rpx;
			box-sizing: border-box;
		}
	}

	.page_title {
		width: 92%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-top: 4vw;
	}

	.page_title .title {
		font-size: 4.5vw;
		color: #fff;
		font-weight: bold;
		flex: 1;
	}

	.page_title .arrow {
		display: flex;
		align-items: center;
		font-size: 4vw;
		color: #fff;
	}


	/*  */

	.pupu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pupu_box .show_box {
		width: 70%;
		background-color: #2B2B2B;
		border-radius: 3vw;
		padding: 5vw 0 0 0;
		position: relative;
	}

	.pupu_box .show_box .title {
		width: 100%;
		text-align: center;
		font-size: 4vw;
		color: #fff;
		font-weight: bold;
		margin-bottom: 5vw;
	}

	.pupu_box .show_box .input {
		width: 84%;
		margin: 0 auto;
		background-color: #222222;
		border-radius: 2vw;
	}

	.pupu_box .show_box .input input {
		width: 100%;
		height: 12vw;
		line-height: 12vw;
		font-size: 3.5vw;
		color: #fff;
		text-align: center;
	}

	.pupu_box .show_box .menu_box {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 5vw;
	}

	.pupu_box .show_box .menu_box .menu {
		flex: 1;
		height: 12vw;
		line-height: 12vw;
		font-size: 3.8vw;
		text-align: center;
	}

	.pupu_box .show_box .menu_box .menu:nth-child(1) {
		border-radius: 0 0 0 3vw;
		background-color: #414141;
		color: #fff;

	}

	.pupu_box .show_box .menu_box .menu:nth-child(2) {
		border-radius: 0 0 3vw 0;
		color: #fff;
		background-color: #0155FF;
	}

	/*  */
</style>